<template>
	<view class="pages" :class="themeName">

		<view class="category-content">
			<!-- 搜索 -->
			<view class="search-input flex p-20 bg-white">
				<u-search class="flex-1" v-model="keyword" height="72" shape="square" bg-color="#F4F4F4"
					:show-action="false" :placeholder="$zhTran('请输入关键字')" @search="handleSearch" />
				<u-button type="primary" :custom-style="customStyle" @click="handleSearch">{{$zhTran('搜索')}}</u-button>
			</view>
		</view>

		<view class="order-list p-20">

			<view class="order-item">
				<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
						  auto: false,
						  noMoreSize: 5,
						  empty: {
						  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
							tip: $zhTran('暂无产品信息~'), // 提示
						  	fixed: true
						  }
					  }" :down="{ 
						  auto: true,
						}" :bottom="150" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<block v-for="(item, idx) in goodsList" :key="idx">
						<view class="warehouse-list p-30 m-b-20 flex row-between" @click="toDetail(item)">
							<view class="flex" style="width: calc(100% - 160rpx);">
								<u-image :src="item.goods_image" width="120rpx" height="120rpx"
									:border-radius="10"></u-image>
								<view class="m-l-10">
									<view class="line-2">{{item.goods_name}}</view>
									<view class="desc m-t-10 m-b-10">{{item.spec_value_str}}</view>
									<view class="desc">{{$zhTran('购买日期：')}}{{item.create_time}}</view>
								</view>
							</view>
							<view class="btn flex row-center m-l-10 p-b-10 p-t-10"
								@click.native.stop="toApply($event, item)"
								style="width: 160rpx;background-color: rgba(64, 115, 250, 1);color:#fff;border-radius: 10rpx;">
								{{$zhTran('发起工单')}}
							</view>
						</view>
					</block>
				</mescroll-uni>
			</view>
		</view>

		<u-tabbar v-model="current" :list="navList" active-color="rgba(64, 115, 250, 1)"
			inactive-color="rgba(133, 133, 133, 1) " @change="toTabbar"></u-tabbar>

		<loading-view v-show="loading"></loading-view>

	</view>
</template>

<script>
	import {
		apiServiceWorkOrderGoodsList,
	} from "@/api/service_work_order"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import {
		navList
	} from "./nav"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				current: 1,
				navList: this.$zhTran(navList),
				goodsList: [],
				keyword: '',
				loading: false,
			};
		},
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
		},
		onShow() {
			this.refreshData();
		},
		computed: {},
		methods: {
			handleSearch() {
				this.mescroll && this.mescroll.resetUpScroll();
			},
			refreshData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiServiceWorkOrderGoodsList({
					keyword: this.keyword,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					if (num === 1) this.goodsList = []
					this.goodsList = [...this.goodsList, ...lists]
					this.goodsList = this.$zhTran(this.goodsList)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
			toDetail(row) {
				this.$Router.push({
					path: '/bundle2/pages/goods_detail/goods_detail',
					query: {
						id: row.goods_id
					}
				})
			},
			toApply(e, row) {
				e.preventDefault(); // 阻止事件冒泡穿透
				this.$Router.push({
					path: '/bundle3/pages/service_work_order/user/apply',
					query: {
						order_goods: row.order_goods
					}
				})
			},
			toTabbar(idx) {
				this.$Router.replaceAll({
					path: this.navList[idx].path,
					query: {}
				})
			},
		},
	};
</script>

<style lang="scss">
	page,
	.pages {
		height: 100%;
		padding: 0;
	}

	.order-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.order-item {
			flex: 1;
			min-height: 0;
		}
	}

	.warehouse-list {
		background-color: #fff;
		border-radius: 10rpx;

		.icon {
			width: 80rpx;
			margin-right: 10rpx;
			border-radius: 50rpx;
		}

		.desc {
			color: rgba(151, 151, 151, 1);
			font-size: 26rpx;
		}
	}
</style>